<template>
    <div>
        <!-- 全屏分界线 -->
      <div class="neirong-tow">
        <div class="type-list">
          <div class="type-box acea-row row-middle">   
              <div class="type-item acea-row row-middle cursor" v-for="(item,index) in childlist" :key="index" @click="typeclick(index)">
                <span class="iconfont icon-arr_right" v-if="index==typeIndex"></span>
                <span class="type-title">{{ item.name }}</span>
                <span class="iconfont icon-arr_left" v-if="index==typeIndex"></span>
              </div>
          </div> 
        </div>

        <!-- 双排图文 -->
        <div class="pic-nav acea-row"  v-if="childlist[typeIndex].showType==2">
            <div class="pic-item" v-for="(item,index) in 4" :key="index">
              <div class="img">
                <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/zhumulv1.png" alt="">
              </div>
              <div class="mt-15">祖母绿</div>
            </div>
        </div>

        <!-- 文章详情 -->
        <!-- <div class="article-nav" v-if="childlist[typeIndex].showType==0">
          <div>集天地之灵气，采万物之精华，勇敢的人类从洪荒时代走到了文明的世纪。大自然——万物之源，是我们人类和一切生命的摇篮，是我们共同的家园。她很大，但不是无边无涯；她很美，但不是青春永在；她很富饶，但不是取之不尽，用之不竭。进入21世纪，人类更加关注自然。善待自然，就是善待我们自己；保护自然，就是保护我们的家园！</div>
        </div> -->

        <!-- 文章列表 -->
        <div class="about65" v-if="childlist[typeIndex].showType==0">
          <div class="list-nav">
            <div class="item acea-row row-between row-middle cursor" v-for="(item,index) in list" :key="index" @click.stop="getinfo(item)">
              <div class="acea-row row-middle flex">
                <div class="wenzhang-left-icon">
                  <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/wenzhang-left-icon.png" alt="">
                </div>
                <div class="wenben line1">{{ item.name }}</div>
              </div>
              <div class="time-day">{{ item.year }}-{{ item.month }}-{{ item.day }}</div>
            </div>
          </div>
        </div>

        <!-- 图文框 -->
        <div class="about65" v-if="childlist[typeIndex].showType==1">
          <div class="pic-text acea-row " v-for="(item,index) in list" :key="index">
            <div class="pic-item acea-row">
              <div class="img">
                  <img class="imgwh" :src="link+item.cover" alt="">
              </div>
              <div class="text-box">
                <div class="bold title">{{ item.name }}</div>
                <div class="content">
                  {{ item.description }}
                </div>
                <div class="acea-row row-right detail">查看详情</div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div style="width:100%;height:3.125rem;"></div>
      <Pagination
          :pageNo="pageNo"
          :pageSize="10"
          :total="total"
          :continues="5"
          :screenWidth="screenWidth" 
          @getPageNo="getPageNo"
      />
      <div style="width:100%;height:3.125rem;"></div>
    </div>
</template>
<script>
  import Pagination from './PaginaTion.vue'
    export default{
        name: 'TypeForm',
        props:["screenWidth","childlist"],
        components:{
          Pagination
        },
        data(){
            return{
              typeIndex:0,
              list:[],
              pageNo:1,
              total:'',
              link: localStorage.getItem('link'),
            }
        },
        watch:{
          childlist(){
            console.log(this.childlist);
            // this.getdata();
          }
        },
        mounted(){
            // console.log('this.childlist====',this.childlist[0].id);
            this.getdata();
        },
        methods:{
          getinfo(item){
            let that = this;
            that.$router.push({ path:`/info?id=${item.id}` },()=>{}, ()=>{})
          },
          getPageNo(pageNo){
            this.pageNo = pageNo;
            this.getdata(this.childlist[this.typeIndex].id)
          },
          typeclick(index){
            this.typeIndex = index;
            this.getdata(this.childlist[index].id)
          },
          getdata(id){
            let that = this;
            that._get('/api/portal/web/article/list',{
              cid: id || that.childlist[0].id,
              pageSize:10,
              pageNum: that.pageNo,
              orderByColumn:'sort_num,publish_time',
              isAsc:'desc'
            }).then(res=>{
              that.$set(that,'list',res.data.rows)
              // that.list = res.data.rows;
              that.total = res.data.total;
            })
          },
        }
    }
</script>
<style lang="scss">
*{
  padding: 0;
  margin: 0;
}
.neirong-tow{
      
    .type-list{
      width: 100%;
      padding: 1.875rem 0;
      border-bottom: .0625rem dashed rgba(144, 126, 76, 0.3);
      
      .type-box{
        width: 65%;
        margin: 0 auto;

        .type-item{
          color: #D0B66E;
          //width: 9.375rem;
          margin-right: 3.125rem;
          margin-bottom: .625rem;

          .type-title{
            font-size: 1rem;
            margin: 0 .3125rem;
          }
          .icon-arr_right,.icon-arr_left{
            font-size: .625rem;
          }

        }
      }
    }

    .pic-nav{
      width: 68%;
      margin: 1.875rem auto;

      .pic-item{
        text-align: center;
        font-size: 1rem;
        margin: 0 0 1.25rem 2.5rem;

        .img{
          width: 37.25rem;
          height: 25.25rem;
        }

      }
    }

    .article-nav{
      width: 65%;
      line-height: 1.875rem;
      min-height: 37.5rem;
      margin: 1.875rem auto;
      font-size: 1rem;
    }

    .pic-text{
        //height: 30.125rem;
        background: rgba(208, 182, 110, 0.36);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
  
        .pic-item{
          width: 100%;
          //height: 100%;
          background: rgba(208, 182, 110, 0.36);
          padding: .625rem;
  
          .img{
            width: 17.125rem;
            height: 23rem;
          }
          .text-box{
            flex: 1;
            height: 23rem;
            margin-left: 1.25rem;

            .title{
              font-size: 1.125rem;
            }
  
            .content{
              line-height: 2.5rem;
              font-size: 1rem;
              margin-top: 3.125rem;
              min-height: 12.5rem;
            }
            .detail{
              color: #907E4C;
              font-size: 1rem;
              margin-top: 3.125rem;
            }
          }
        }
      }


      .list-nav{
        margin-top: 1.875rem;
    
        .item:last-child{
          border: none;
        }
        .item{
          border-bottom: .0625rem dashed #907E4C;
          padding: 1.25rem 0;
          color: #333333;
          font-size: 1.375rem;
    
          .wenzhang-left-icon{
            width: 1.375rem;
            height: 1.375rem;
          }
    
          .wenben{
            width: 80%;
            margin-left: 1.25rem;
          }
    
        }
    
      }


  }

  @media screen and (max-width: 36rem) {
        
    .neirong-tow{

      .type-list{

        .type-box{
          width: 90%;

          .type-item{
            //width: 25%;
            margin-right: 1.25rem;

            .type-title{
              font-size: .875rem;
            }

          }

        }

      }

      .pic-nav{
        width: 100%;

        .pic-item{
          margin: 0 0 1.25rem 1.6875rem;
          font-size: .75rem;
          color: #333333;

          .img{
            width: 10.375rem;
            height: 7.6875rem;
          }
        }

      }

      .article-nav{
        width: 90%;
        font-size: .875rem;
      }

      .about65{
        width: 90%;
        margin: 0 auto;
      }
      .list-nav{
        margin-top: 0;

        .item:last-child{
          border-bottom: .0625rem dashed #907E4C;
        }
        .item{
          //width: 100%;

          .wenben{
             font-size: .875rem;
             width: 20.625rem;
           }
           .time-day{
             font-size: .75rem;
             color: #999999;
             margin: 1.25rem 0 0 2.5rem;
           }

        }

      }

      .pic-text{
        //height: 8.875rem;
        margin-top: 1.25rem;

        .pic-item{
          padding: .625rem;

          .img{
            width: 5.75rem;
            height: 8.125rem; 
          }

          .text-box{
            height: 4.5rem;

            .title{
              width: 10.5rem;
              font-size: .8125rem;
              white-space: nowrap; /* 确保文本在一行内显示 */
              overflow: hidden; /* 隐藏溢出的内容 */
              text-overflow: ellipsis; /* 使用省略号表示文本被截断 */
            }
            .content{
              width: 11.875rem;
              line-height: 1.25rem;
              font-size: .75rem;
              margin-top: .625rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              -webkit-line-clamp: 4;
              text-overflow: ellipsis;
              min-height: 4.375rem;
            }
            .detail{
              color: #907E4C;
              font-size: .75rem;
              margin-top: .625rem;
            }
          }


        }


      }





    }
    
  }

</style>